<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<th:block th:include="include :: header('项目里程碑列表')" />
	<link th:href="@{/css/plugins/gtt/jquery-ui-1.8.4.css?v=3.3.7}" rel="stylesheet"/>
	<link th:href="@{/css/plugins/gtt/jquery.ganttView.css?v=3.3.7}" rel="stylesheet"/>
	<link th:href="@{/css/plugins/gtt/reset.css?v=3.3.7}" rel="stylesheet"/>
	<style type="text/css">
		body {
			font-family: tahoma, verdana, helvetica;
			font-size: 0.8em;
			padding: 10px;
		}
	</style>
	<title>jQuery Gantt</title>
</head>
<body>

	<div id="ganttChart"></div> <!--表格主体 用ID绑定-->

	<div id="ganttChart2"></div> <!--表格主体 用ID绑定  chart2使用的是ajax获取接口的方式-->
	
	<!--ajax表格在非服务器环境可能不会运行 本地打开html只会显示一个表格-->
	
	<script th:src="@{/js/plugins/gtt/jquery.min.js?v=3.6.0}"></script><!--jquery 框架中可不引入-->
	<script th:src="@{/js/plugins/gtt/jquery.tmpl.js?v=3.6.0}"></script><!--jquery.tmpl 框架中可不引入-->
	<script th:src="@{/js/plugins/gtt/jquery-ui-1.10.4.min.js?v=3.6.0}"></script><!--jquery-ui 框架中可不引入-->
	<script th:src="@{/js/plugins/gtt/jquery.ganttView.js?v=3.6.0}"></script><!--jquery.ganttView 甘特图插件-->
	<script th:src="@{/js/plugins/gtt/date.js?v=3.6.0}"></script><!--date 日期插件-->
	<script th:src="@{/data/data.js?v=3.6.0}"></script><!--范例数据js 实际项目中不引入-->
	
	<script type="text/javascript">
		$(function () {
			//js数据版,如果直接朝页面输出js数据,则使用此部分代码
			$("#ganttChart").ganttView({ 
				data: ganttData,//使用的js数据
				slideWidth: 900,//右侧甘特图部分的宽度
				behavior: {
					draggable: false,
					onClick: function () { 
					//点击事件
					},
					onResize: function () { 
					//浏览器改变大小事件

					}
				}
			});
			
			$.ajax({ //ajax接口版 使用接口返回数据时使用此代码
				url:"./data/data.json",//接口地址,此处用.json文件作为范例
				type: "GET", // 请求方式
				data:"",//发送的数据
				contentType: "application/json",
				dataType: "json", //此处在范例为.json文件时使用,使用接口返回时如果无法处理返回值,可去掉此行
				success: function(response) {
					console.log("请求成功：", response);
					
					
					$("#ganttChart2").ganttView({ 
						data: response.data,//范例的返回值中的data为数据集
						slideWidth: 900,
						behavior: {
							draggable: false,
							onClick: function () { 
							//点击事件
							},
							onResize: function () { 
							//浏览器改变大小事件

							}
						}
					});
				},
				error: function(xhr, status, error) {
					console.error("请求失败：", status, error);
				}
			});
			
		});
	</script>

</body>
</html>
